<template>
  <div>
    <div class="crud-group">
      <el-input
        v-model="paramsForm.sourceName"
        placeholder="请输入源名称"
        type="text"
      />
      <el-input
        v-model="paramsForm.libraryTableName"
        placeholder="请输入库表名称"
        type="text"
      />
      <el-select
        v-model="paramsForm.deleType"
        placeholder="请选择类型"
      >
        <el-option
          label="数据删除"
          value="数据删除"
        />
        <el-option
          label="数据稽核"
          value="数据稽核"
        />
      </el-select>
      <el-select
        v-model="paramsForm.deleState"
        placeholder="请选择状态"
      >
        <el-option
          label="成功"
          value="成功"
        />
        <el-option
          label="失败"
          value="失败"
        />
      </el-select>
      <div>
        <el-button
          type="success"
          @click="getData"
        >
          搜索
        </el-button>
        <el-button
          type="warning"
          @click="reset"
        >
          重制
        </el-button>
      </div>
    </div>

    <el-table
      v-loading="isLoading"
      :data="data"
      border
    >
      <el-table-column
        label="源名称"
        prop="sourceName"
      />
      <el-table-column
        label="库表名称"
        prop="libraryTableName"
      />
      <el-table-column
        label="类型"
        prop="deleType"
      />
      <el-table-column
        label="状态"
        prop="deleState"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.deleState === '成功'"
            type="success"
          >
            {{ scope.row.deleState }}
          </el-tag>
          <el-tag
            v-else
            type="danger"
          >
            {{ scope.row.deleState }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="paramsForm.current"
        :page-size="paramsForm.size"
        layout="prev, pager, next,sizes,total"
        :total="data.total"
        @current-change="getData"
      />
    </div>
  </div>
</template>

<script>
import { getHotsPareDele } from '@/api/dashboard/uatSync'

const params = {
  current: 1,
  size: 10,
  sourceName: '',
  libraryTableName: '',
  deleType: '',
  deleState: '',
  log: ''
}

export default {
  data() {
    return {
      isLoading: false,
      data: [],
      paramsForm: params
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.isLoading = true
      const param = this.paramsForm
      const res = await getHotsPareDele(param)
      this.isLoading = false
      this.data = res.records
    },
    reset() {
      this.paramsForm = params
      this.getData()
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
